<!--
 作者：ex_baiyc
 日期：2016-11-3
 功能：首页-知己彼-产品对比-产品评价详细对比
 参数：
 事件：
-->
<template>
  <div>
    <toolbar :view-title="viewTitle">
      <div class="leftButton"
           type="button"
           slot="left-button"
           v-link='{path: "/peer"}'>&nbsp;
      </div>
      <div
        class="rightButton"
        type="button"
        slot='right-button'>
        <div class="filterButton" @click="showFilter" v-show="!filterOpenState">
          <span class="filterIcon" :page-id="routeKey">&nbsp;</span>
          <span>筛选</span>
        </div>
        <div class="menuButton" @click="showSlideMenu" v-show="!filterOpenState">
          <span class="menuIcon">&nbsp;</span>
          <span>菜单</span>
        </div>
        <span v-show="filterOpenState" @click="doFilter" class="filterOver">完成</span>
      </div>
    </toolbar>
    <div class="content">
      <select-for-product :select-a-text="'选择产品A'"
                          :select-b-text="'选择产品B'"
                          :model-a="modelA"
                          :model-b="modelB"
                          :default-org-id="defaultOrgId"
                          :default-category="defaultCategory"
                          :default-category-id="defaultCategoryId"></select-for-product>
      <div class="filter-message-box clearfix">
        <a  v-if="defaultCategory !== ''" class="filter-condition" @click="showFilter('pinlei')" href="javascript:;">{{defaultCategory}}</a>
        <span>
          <a v-if="UrlParams.platform !== ''" class="filter-condition" @click="showFilter('pingtai')" href="javascript:;" v-text="UrlParams.platform"></a>
          <a v-if="UrlParams.platform === ''" class="filter-condition" @click="showFilter('pingtai')" href="javascript:;">所有平台</a>
        </span>
        <a class="filter-condition" @click="showFilter('shijian')" href="javascript:;">{{UrlParams.startTime | formatDate}} - {{UrlParams.endTime | formatDate}}</a>
      </div>
      <div class="split-line"></div>
      <condition-filter :condition-list="conditionList"></condition-filter>
      <div class="split-line"></div>
      <!-- <div class="time">{{UrlParams.startTime | formatDate}} - {{UrlParams.endTime | formatDate}}</div> -->
      <table-view id="tableView"
                  :product-a = "productA"
                  :product-b = "productB"
                  :table-title="tableTitle"
                  :thead="thead"
                  :grid-columns="gridColumns"
                  :table-rows="tableRows"
                  :table-height="'42vh'"
                  @select_product="goPath">
      </table-view>
    </div>
    <filter-view v-show="filterOpenState"
                 :choose-platforms="choosePlatforms"
                 :condition="conditions"
                 :page-id="routeKey"
                 :default-start-date="UrlParams.startTime"
                 :default-end-date="UrlParams.endTime"
                 :default-org-id="defaultOrgId"
                 :default-category="defaultCategory"
                 :default-category-id="defaultCategoryId"></filter-view>
    <slide-menu v-show="menuOpenState"></slide-menu>
    <page-turning :mkey="routeKey" :page-id="'peer'"></page-turning>
    <div class="loading-box">
      <img src="../../../../static/img/loading.gif" class="loading">
    </div>
    <confirm :show.sync="timeoutStatus"
     title="加载失败,您可以"
     cancel-text="返回首页"
     confirm-text="重新加载"
     @on-cancel="this.$route.router.go('/home')"
     @on-confirm="reload"></confirm>
  </div>
</template>

<script>
  import Toolbar from '../../common/Toolbar.vue'
  import selectForProduct from '../SelectForProduct.vue'
  import ConditionFilter from '../../common/ConditionFilter.vue'
  import TableView from '../TableViewForDetail.vue'
  import FilterView from '../../common/FilterView.vue'
  import SlideMenu from '../../peer/SlideMenu.vue'
  import pageTurning from '../../common/pageTurning.vue'
  import Confirm from 'vux/dist/components/Confirm'

  export default{
    components: {
      Toolbar,
      selectForProduct,
      ConditionFilter,
      TableView,
      FilterView,
      SlideMenu,
      pageTurning,
      Confirm
    },
    data () {
      return {
        choosePlatforms: '',
        timeoutStatus: false,
        routeKey: '',
        menuOpenState: false,
        filterOpenState: false,
        viewTitle: '产品评价详细对比',
        tableTitle: '',
        tableRows: [],
        tableRows1: [],
        tableRows2: [],
        tableRows3: [],
        gridColumns: ['paramsName', 'product1All', 'product1Bad', 'product2All', 'product2Bad'],
        thead: [],
        conditionList: [
          {'id': 0, 'value': 'purchase', 'text': '购买体验'},
          {'id': 1, 'value': 'product', 'text': '产品体验'},
          {'id': 2, 'value': 'service', 'text': '服务体验'}
        ],
        starttime: '',
        endtime: '',
        brandA: '',
        brandB: '',
        productA: '',
        productB: '',
        modelA: '',
        modelAID: '',
        modelB: '',
        modelBID: '',
        defaultOrgId: '',
        defaultCategory: '',
        defaultCategoryId: '',
        UrlParams: {
          pageId: 71,
          mkey: 'productDetailedEvaluation',
          dateSeg: 'other',
          startTime: '',
          endTime: '',
          category_id: '',
          category: '',
          brand: '',
          product: '',
          model: '',
          model_id: '',
          org_code: '',
          platform: ''
        }
      }
    },
    methods: {
      goPath: function (index) {
        let path = `/industry/productInfo?category_id=${this.defaultCategoryId}&category=${this.defaultCategory}&org_id=${this.defaultOrgId}&`
        if (index === 0) {
          path += `brand=${this.brandA}&model=${this.modelA}`
        } else {
          path += `brand=${this.brandB}&model=${this.modelB}`
        }
        this.$router.go(path)
      },
      reload: function () {
        window.location.reload()
      },
//      显示筛选
      showFilter: function () {
        this.filterOpenState = true
      },
//      显示页面导航侧栏
      showSlideMenu: function () {
        this.menuOpenState = !this.menuOpenState
        var self = this
        setTimeout(function () {
          self.$broadcast('slideStart')
        }, 0)
      },
//      执行筛选
      doFilter: function () {
        this.$broadcast('doFilter')
      },
//      获取页面数据后填充表格数据
      getData: function (params) {
        // this.$dispatch('changeLoadingStatus', true)
        var _this = this
        this.$http.post(window.interface.peerData, params, {_timeout: 30000}).then(function (res) {
          if (res.json().error) {
            this.timeoutStatus = true
            return
          }
          document.getElementsByClassName('loading-box')[0].style.display = 'none'
          this.$dispatch('changeLoadingStatus', false)
          var data = res.json()
          // if (!data.chartDatas[0] || data.chartDatas[0].detail.length === 0 || !data.chartDatas[1] || data.chartDatas[1].detail.length === 0 || !data.chartDatas[2] || data.chartDatas[2].detail.length === 0) {
          //   window.alert('当前条件下无数据,请重新选择!')
          //   this.filterOpenState = true
          //   return
          // }
          this.choosePlatforms = data.platformCnd || data.platform
          _this.productA = data.product ? data.product.split(',')[0] : ''
          _this.productB = data.product ? data.product.split(',')[1] : ''
          _this.modelA = data.model.split(',')[0]
          _this.modelB = data.model.split(',')[1]
          _this.modelAID = data.model_id ? data.model_id.split(',')[0] : ''
          _this.modelBID = data.model_id ? data.model_id.split(',')[1] : ''
          _this.brandA = data.brand.split(',')[0]
          _this.brandB = data.brand.split(',')[1]
          _this.UrlParams.startTime = data.startTime || ''
          _this.UrlParams.endTime = data.endTime || ''
          _this.defaultOrgId = _this.UrlParams.org_code = data.org_code || ''
          _this.defaultCategoryId = _this.UrlParams.category_id = data.category_id || ''
          _this.defaultCategory = _this.UrlParams.category = data.category || ''
          this.$broadcast('loadDataDone')
          var detail1 = data.chartDatas[0].detail
          var detail2 = data.chartDatas[1].detail
          var detail3 = data.chartDatas[2].detail
          _this.starttime = data.chartDatas[0].starttime
          _this.endtime = data.chartDatas[0].endtime
          for (var i = 0; i < detail1.length; i++) {
            if (i % 2 === 0) {
              _this.tableRows1.push({
                'paramsName': detail1[i].property,
                'product1All': detail1[i].referPercent,
                'product1Bad': detail1[i].badReferPercent,
                'product2All': detail1[i + 1].referPercent,
                'product2Bad': detail1[i + 1].badReferPercent
              })
            }
          }

          for (var j = 0; j < detail2.length; j++) {
            if (j % 2 === 0) {
              _this.tableRows2.push({
                'paramsName': detail2[j].property,
                'product1All': detail2[j].referPercent,
                'product1Bad': detail2[j].badReferPercent,
                'product2All': detail2[j + 1].referPercent,
                'product2Bad': detail2[j + 1].badReferPercent
              })
            }
          }

          for (var k = 0; k < detail3.length; k++) {
            if (k % 2 === 0) {
              _this.tableRows3.push({
                'paramsName': detail3[k].property,
                'product1All': detail3[k].referPercent,
                'product1Bad': detail3[k].badReferPercent,
                'product2All': detail3[k + 1].referPercent,
                'product2Bad': detail3[k + 1].badReferPercent
              })
            }
          }
        }, (res) => {
          this.timeoutStatus = true
        })
      }
    },
    events: {
//      接收filter组件回传回来的值，然后再根据值重新请求页面数据
      'filterConditions': function (filterConditions) {
//        this.UrlParams.department = filterConditions.department || ''
        this.UrlParams.category = filterConditions.category || ''
        this.UrlParams.category_id = this.defaultCategoryId = filterConditions.category_id || ''
        this.UrlParams.platform = filterConditions.platform || ''
        this.UrlParams.platform_id = filterConditions.platform_id || ''
        this.UrlParams.startTime = filterConditions.starttime || ''
        this.UrlParams.endTime = filterConditions.endtime || ''
        this.UrlParams.dateSeg = filterConditions.dateSeg || ''
        this.UrlParams.org_code = filterConditions.org_code || ''
        document.getElementsByClassName('loading-box')[0].style.display = 'block'
        this.getData(this.UrlParams)
      },
//      切换体验指标
      'changeCondition': function (id) {
        this.tableRows = this.tableRows
        switch (id) {
          case 0:
            this.tableRows = this.tableRows1
            break
          case 1:
            this.tableRows = this.tableRows2
            break
          case 2:
            this.tableRows = this.tableRows3
            break
        }
      },
//      选择产品后更改参数重新获取数据,
      'chooseProductA': function (row) {
        this.brandA = row.brand
        this.modelA = row.model
        this.modelAID = row.model_id
        this.productA = row.brand + '|' + row.model
        if (this.productB.indexOf('选择产品') === -1) {
          this.UrlParams.brand = this.brandA + ',' + this.brandB
          this.UrlParams.model = this.modelA + ',' + this.modelB
          this.UrlParams.model_id = this.modelAID + ',' + this.modelBID
          this.UrlParams.product = this.productA + ',' + this.productB
          document.getElementsByClassName('loading-box')[0].style.display = 'block'
          this.getData(this.UrlParams)
        }
      },
      'chooseProductB': function (row) {
        this.brandB = row.brand
        this.modelB = row.model
        this.modelBID = row.model_id
        this.productB = row.brand + '|' + row.model
        this.UrlParams.brand = this.brandA + ',' + this.brandB
        this.UrlParams.model = this.modelA + ',' + this.modelB
        this.UrlParams.model_id = this.modelAID + ',' + this.modelBID
        this.UrlParams.product = this.productA + ',' + this.productB
        document.getElementsByClassName('loading-box')[0].style.display = 'block'
        this.getData(this.UrlParams)
      }
    },
    ready: function () {
      this.getData(this.UrlParams)
//     初次进入页面后显示第一个 tableRows 数据
      this.tableRows = this.tableRows1
    },
    created: function () {
      this.routeKey = this.$route.query.key
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    position: relative;
    margin-top: 8vh;
    margin-bottom: 8vh;
  }

  .split-line {
    width: 100%;
    height: 3px;
    background: #f2f2f2;
  }

  .time {
    margin-top: 1.4vh;
    margin-bottom: 1.4vh;
    padding-left: .7rem;
    background: url('../../../../static/img/time-time.png') no-repeat .3rem center / .28rem .26rem;
    font-size: .26rem;
    height: 3vh;
    line-height: 3vh;
    color: #999;
  }

  .filter-message-box{
    padding: 0rem .2rem .2rem;
    font-size: 0.28rem;
  }
</style>
